<template>
  <div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "@/libs/tools";
echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "Chartpies",
  props: {
    value: Object,
    num: Number,
    text: String,
    title:Array,
    subtext: String,
    series: Array,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    legendData: Array,
    color: {
      type: Array,
      default: () => {
        return ["#2f83e4"];
      },
    },
  },
  data() {
    return {
      dom: null,
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    title: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    intChart() {
      var that = this;
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.showLoading({
        text: 'loading',
        color: '#2D8CF0',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      })
      this.$nextTick(() => {
        console.log('进来了')
        let value = that.value;
        let seriesData = value.series
        let title = value.title
        let series = {
          type: "pie",
          radius: 60,
          radius: [0, "30%"],
          label: {
            position: "inner",
          },
          labelLine: {
            show: true,
          }
        }
        let num = this.num;
        if(num == 1) {
          title = title
        }
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              // magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          title: title,
          series: seriesData,
        };
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);
        on(window, "resize", this.resize);
      });
    },
  },
  mounted() {
    this.intChart();
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  },
};
</script>
